<template>
    <el-card>
        <template #header>
            <label style="font-size: 25px; ">账户信息</label>
            <span v-if="userInfo.authorId != null" class="link" @click="toProtal()">前往个人科研门户</span>
            <span v-else class="link" @click="toScholor()">尚未认领, 前往学者库</span>
        </template>
        <el-descriptions :column="1">
            <el-descriptions-item label="邮箱: ">
                {{userInfo.email}}
            </el-descriptions-item>
        </el-descriptions>
        <div style="height: 10px; "/>
        <div class="detail chPwdEntry">
            <label style="font-size: 18px; " @click="chPwdIng = true">
                修改密码<em class="el-icon-caret-left"/>
            </label>
        </div>
    </el-card>
    <div style="height: 20px;"/>
    <el-card>
        <template #header>
            <label style="font-size: 25px; ">个人信息</label>
        </template>
        <el-descriptions :column="1" v-if="!chInfoIng">
            <el-descriptions-item label="用户名: ">{{userInfo.username}}</el-descriptions-item>
            <el-descriptions-item label="电话: ">{{userInfo.phone}}</el-descriptions-item>
            <el-descriptions-item label="所属机构: ">{{userInfo.department}}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions :column="1" v-else>
            <el-descriptions-item label="用户名: "><input class="info-input" v-model="userInfo.username"/></el-descriptions-item>
            <el-descriptions-item label="电话: "><input class="info-input" v-model="userInfo.phone"/></el-descriptions-item>
            <el-descriptions-item label="所属机构: "><input class="info-input" v-model="userInfo.department"/></el-descriptions-item>
        </el-descriptions>
        <el-row>
            <el-col :span="4" v-if="!chInfoIng">
                <el-button size="medium" type="primary" @click="chInfoIng = true">编辑</el-button>
            </el-col>
            <el-col :span="4" v-if="chInfoIng">
                <el-button size="medium" type="primary" @click="commitInfo()">完成</el-button>
            </el-col>
            <el-col :span="4" v-if="chInfoIng">
                <el-button size="medium" @click="chInfoIng = false">取消</el-button>
            </el-col>
            <el-col :span="16" v-if="chInfoIng"/>
        </el-row>
    </el-card>

    <el-dialog
        v-model="chPwdIng"
        title="修改密码"
        :before-close="handleClose">
        <div class="chPwdPanel">
            <el-row>
                <span class="chPwdTitle">新密码:</span>
            </el-row>
            <el-row>
                <el-input v-model="chForm.chPwd" show-password/>
            </el-row>
            <el-row>
                <span class="chPwdTitle">验证码:</span>
            </el-row>
            <el-row>
                <el-input v-model="chForm.key">
                    <template #append>
                        <el-button v-if="keyInterval == 0" @click="getKey()">获取验证码</el-button>
                        <el-button v-else>{{keyInterval}}秒后可重新获取</el-button>
                    </template>
                </el-input>
            </el-row>
            <el-row>
                <div class="action">
                    <span @click="changePwd()">提交</span>
                </div>
            </el-row>
        </div>
    </el-dialog>
</template>

<script>
import axios from "@/utils/MyAxios"
import qs from "qs"
import { ElMessageBox, ElMessage } from 'element-plus'
export default {
    mounted(){
        let user = JSON.parse(localStorage.getItem('user'))
        if (user != null) {
            this.$store.commit('setToken', user.token)
        }
        console.log(this.token)
        this.updateInfo()
    },
    data() {
        return {
            chPwdIng: false,
            chInfoIng: false,
            userInfo: {
                authorId: null,
                email: '',
                username: '',
                phone: '',
                department: ''
            },
            chForm: {
                chPwd: '',
                key: ''
            },
            keyInterval: 0
        }
    },
    computed: {
        token() {
            return this.$store.state.user.token
        }
    },
    methods: {
        toProtal() {
            window.open('/portal', '_self')
        },
        toScholor() {
            window.open('/authorIndex', '_self')
        },
        handleClose(done) {
            ElMessageBox.confirm('您确定退出吗? 您所做的修改将不会保存')
                .then(() => {
                    this.chForm = {
                        chPwd: '',
                        key: ''
                    }
                    done()
                })
        },
        getKey() {
            this.keyInterval = 30
            var timer = setInterval(()=>{
                this.keyInterval -= 1
                if (this.keyInterval == 0) {
                    clearInterval(timer)
                    timer = null
                }
            }, 1000)
            axios.post('/api/user/sendCode', qs.stringify({email: this.userInfo.email}))
                .then(response=>{
                    console.log(response)
                    ElMessage({
                        message: response.data.msg,
                        showClose: true
                    })
                })
                .catch(err=>{
                    console.log(err)
                    ElMessage({message: err.message, showClose: true})
                })
        },
        changePwd() {
            if (this.chForm.chPwd == '' || this.chForm.key == '') {
                this.$message({message: '请输入新密码和验证码', showClose: true})
            } else if (this.chForm.chPwd.length < 6 || this.chForm.chPwd.length > 20) {
                this.$message({message: '密码长度应在6~20位', showClose: true})
            } else {
                let data = {
                    email: this.userInfo.email,
                    code: this.chForm.key
                }
                axios.post('/api/user/checkCode', qs.stringify(data))
                    .then(response => {
                        console.log(response)
                        if (response.data.code == 0) {
                            data = {
                                token: this.token,
                                newPassword: this.chForm.chPwd
                            }
                            axios.post('/api/user/info/updatePwd', qs.stringify(data))
                                .then(res => {
                                    console.log(res)
                                    if (res.data.code == 0) {
                                        this.$message.success({message: res.data.msg, showClose: true})
                                        this.chPwdIng = false
                                    } else {
                                        this.$message.error({message: res.data.msg, showClose: true})
                                    }
                                })
                        } else {
                            this.$message.error({message: response.data.msg, showClose: true})
                        }
                    })
                    .catch(error => {
                        ElMessage.info({message: error.message, showClose: true})
                    })
            }
        },
        commitInfo() {
            this.chInfoIng = false
            let data = {
                token: this.token,
                username: this.userInfo.username,
                department: this.userInfo.department,
                phone: this.userInfo.phone,
            }
            axios.post('/api/user/info/updateInfo', qs.stringify(data))
                .then(res => {
                    console.log(res)
                    if (res.data.code == 0) {
                        this.$message.success({message: res.data.msg, showClose: true})
                    } else {
                        ElMessage.error({message: res.data.msg, showClose:true})
                    }
                })
        },
        updateInfo() {
            let data = {
                token: this.token
            }
            axios.post('/api/user/info', qs.stringify(data))
                .then(res => {
                    console.log(res)
                    data = res.data
                    if (data.code == 0) {
                        this.userInfo = data.data;
                    }
                })
        }
    }
}
</script>

<style scoped>
.link {
    float: right;
    font-size: 15px;
    color: #3B7FD9;
    cursor: pointer;
    font-weight: bold;
}
.detail {
    font-size: 20px;
    margin: 5px;
}
.info-input {
    font-size: 12px;
    height: 30px;
    border-radius: 4px;
    border: 1px solid #c8cccf;
    box-shadow: 2px 2px 5px 1px #ccc;
}
.chPwdEntry :hover {
    cursor: pointer;
    color: #3B7FD9;
}
.chPwdPanel {
    width: 85%;
    margin-left: 7%;
    font-size: 16px;
}
.chPwdTitle {
    margin-top: 10px;
    margin-bottom: 10px;
}
.action {
    text-align: center;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 80%;
    height: 35px;
    margin: 20px;
}
.action span {
    width: 100%;
    background-color:#0076CC;
    color: #fff;
    margin-inline: 15px;
    cursor: pointer;
    font-size: 20px;
    line-height: 40px;
    border-radius: 10px;
}
</style>